<template>
  <div class="detail">
    <Headers>
      <router-link to="/home" class="header-left" slot="icon1"><i class="iconfont icon-jiantou"></i></router-link>
      <b slot="text">详情</b>
    </Headers>
    <div class="detail-body">
      <div class="detail-head">
        <h2 class="title">{{detailList.title}}</h2>
        <div class="avatar">
          <span class="time">{{detailList.last_reply_at | getDateDiff}}</span>
          <img class="user-img" :src="avatar_url" alt="">
          <span class="user-name">{{loginname}}</span>
        </div>
      </div>
      <div class="detail-content">
        <div v-html="detailList.content"></div>
      </div>
      <div class="detail-comments-length">
        {{commentsCountLength}}回复
      </div>
      <div class="detail-comments">
        <ul>
          <li class="comments-item" v-for="(item,index) in commentsList">
            <div class="avatar">
              <span class="time">{{item.create_at | getDateDiff}}</span>
              <span class="good"><i class="iconfont icon-zansel"></i>{{item.ups.length}}</span>
              <span class="name"><img :src="item.author.avatar_url" alt="">{{item.author.loginname}} <b>{{index+1}}楼</b></span>
            </div>
            <div class="desc" v-html="item.content"></div>
          </li>
        </ul>
        <div class="none-more" v-if="commentsDataLoadStatus">
          ~已经没有更多评论了~
        </div>
      </div>
    </div>
    <Returntop></Returntop>
  </div>
</template>

<script>
import { Indicator } from 'mint-ui';
import Headers from './headers';
import Returntop from './returnTop';
const URL = 'http://www.vue-js.com/api/v1/';
export default {
  name: 'detail',
  data () {
    return {
      detailList: {},                 
      loginname: '',                  
      avatar_url: '',                 
      page: 0,
      commentsCountLength: 0,         
      commentsDataLoadStatus: false,  
      commentsEmpty: true,            
      commentsStatus: true,           
      commentsPage: 0,                
      commentsCount: 10,              
      commentsList: []                
    }
  },
  mounted () {
     this.getData();
  },
  beforeRouteEnter (to, form, next) {
    next(vm => {
      window.addEventListener('scroll',vm.scrollBottom, false);
    });
  },
  beforeRouteLeave (to, from, next) {
    this.reductionDefault();
    window.removeEventListener('scroll',this.scrollBottom, false);
    next();
  },
  watch: {
   '$route': 'getData'
  },
  methods: {
    getData () {
      let id = this.$route.params.id;
      if ( id === undefined) return;
      Indicator.open();
      this.ajax(`${URL}topic/${id}`, (res) => {
        this.detailList = res.body.data;
        this.loginname = this.detailList.author.loginname;
        this.avatar_url = this.detailList.author.avatar_url;
        this.getCommentsData(this.commentsPage,this.commentsCount, () => {
          this.commentsCountLength = this.detailList.replies.length;
          Indicator.close();
        });
      });
    },
    scrollBottom (event) {
      let t = document.documentElement.scrollTop || document.body.scrollTop;
      let win_height = document.documentElement.clientHeight || document.body.clientHeight;
      let ele_height = document.documentElement.scrollHeight || document.body.scrollHeight;
      if (!this.commentsDataLoadStatus) {
        if (t + win_height >= ele_height) {
          if (this.commentsStatus) {
            this.page++;
            this.commentsStatus = false;
            this.commentsPage = this.page * this.commentsCount;
            this.getCommentsData(this.commentsPage,this.commentsCount, () => {
              this.commentsStatus = true;
            });
          }
        }
      }
    },
    getCommentsData (page, count, cb) {
      count += page;
      if (count > this.detailList.replies.length) {
        count = this.detailList.replies.length;
        this.commentsDataLoadStatus = true;
      }
      for (let i = page; i < count; i++) {
        if (this.commentsEmpty) {
          this.commentsList.push(this.detailList.replies[i]);
        } else {
          let arr = this.commentsList.concat(this.detailList.replies[i]);
          this.commentsList = arr;
        }
      }
      this.commentsEmpty = false;
      cb && cb();
    },
    reductionDefault () {
      this.commentsEmpty = true;
      this.loginname = '';
      this.avatar_url = '';
      this.commentsCountLength = 0;
      this.page = 0;
      this.commentsPage = 0;
      this.commentsCount = 10;
      this.commentsDataLoadStatus = false;
      this.detailList = [];
      this.commentsList = [];
    },
    ajax (url,cb) {
      this.$http.get(url).then( res => {
        if (res.status === 200) {
          cb && cb(res);
        }
      }, error => {
        console.log(error);
      });
    }
  },
  components: {
    Headers,
    Returntop
  }
}
</script>

<style>
.markdown-text img{
  width: auto;
  max-width: 100%;
}
.detail{
  padding-top: 45px;
}
    .detail-head{
      padding: 10px;
    }
      .title{
        line-height: 25px;
        font-size: 18px;
        font-weight: bold;
      }
      .avatar{
        padding: 10px 0;
      }
        .user-img{
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
        .user-name{
          color: #0088cc;
          font-size: 14px;
        }
        .time{
          float: right;
          line-height: 30px;
          color: #999;
          font-size: 12px;
        }
    .detail-content{
      padding: 10px;
    }
        p{
          line-height: 20px;
          font-size: 14px;
          font-weight: bold;
        }
          a{
            color: #999;
            font-weight: normal;
          }
      h2{
        margin-top: 20px;
        margin-bottom: 15px;
        font-size: 36px;
        font-weight: bold;
      }
      ul{
        margin: 0 0 10px 25px;
      }
        ul li{
          line-height: 23px;
          list-style: disc;
          font-size: 16px;
          font-weight: bold;
        }
         ul li{
            list-style: circle;
          }
         ul li a{
            display: block;
            line-height: 23px;
            font-size: 14px;
            font-weight: normal;
            color: #61b7a0;
          }
    .detail-comments-length{
      padding: 15px;
      background-color: #fbfbfb;
    }
      .comments-item{
        padding: 15px;
        border-top: 1px solid #ddd;
      }
        .avatar{
          font-size: 0;
        }
        .avatar > span{
            display: inline-block;
          }
          .time{
            float: right;
            line-height: 30px;
            color: #999;
            font-size: 12px;
          }
          .good{
            float: right;
            margin-right: 5px;
            line-height: 30px;
            color: #666;
            font-size: 12px;
          }
            .iconfont{
              margin-right: 2px;
              font-size: 12px;
            }
          
          .name{
            font-size: 14px;
          }
           .name img{
              margin-right: 7px;
              width: 30px;
              height: 30px;
              border-radius: 50%;
            }
            b{
              color: #61b7a0;
            }
       
        .desc{
          padding-top: 5px;
          line-height: 20px;
          color: #666;
        }
         .desc p{
            word-wrap: break-word;
          }
         .desc a{
            color: #61b7a0;
          }
      .none-more{
        padding: 15px;
        border-top: 1px solid #ddd;
        text-align: center;
        color: #c3c3c3;
      }
    
  

</style>
